<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<meta name="author" content="陈  AlexChen age:25 "/>
		<meta name="keywords" content="求职 前端  个人简历"/>
    	<meta name="contact" content="tel 15995725869 e-mail:15995725869@sina.cn"/>

		<title>个人简历</title>
		<!--引入title中的icon图标-->
<!--		<link rel="shortcut icon" href="./images/favicon.ico"/>-->
		<link rel="stylesheet" href="css/animation.css" />
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<style>
			body,html{
				height: 100%;
			}
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.front{
				height: 100%;
				overflow: hidden;
			}
			.left,.middle,.right{
				float: left;
			}
			.left{
				display: inline-block;
				width: 33.333%;
				height: 100%;
				background: url(img/pure.jpg) no-repeat 50% 50%;
				background-size: cover;
				z-index: 3;	
			}
			.middle{
				width: 33.333%;
				height: 100%;
				background: url(img/pure1.jpg) no-repeat 50% 50%;
				background-size: cover;
			}
			.right{
				display: inline-block;
				width: 33.333%;
				height: 100%;
				background: url(img/pure2.jpg) no-repeat 50% 50%;
				background-size: cover;
				position: relative;
			}
			
			#loader{
				position: absolute;
				right: 100px;
				bottom: 50px;
				width: 80px;
				height: 80px;
				margin:10px auto;
			}
			.introduce{
				padding: 5px 15px;
				width: 80%;
				color: white;
				margin: 55% auto;
			}
			.introduce h3{
				font-size: 38px;
			}
			.introduce p{
				font-size: 24px;
				padding: 15px 0 15px 100px ;
			}
		</style>
	</head>
	<body>
		<div class="front" >
			<!--<div class="mask"></div>-->
			<div class="left animated">	
			</div>
			<div class="middle animated">
				<div class="introduce">
					<h3 class="animated">前端工程师求职简历</h3>
					<p class="animated">-----陈银龙</p>
					<p class="animated">Tel: 15995725869</p>
				</div>
			</div>
			<div class="right animated">
				<div id="loader"></div>
			</div>
			
		</div>
	</body>
	<script type="text/javascript" src="js/lib/jquery.js"></script>
	<script src="js/jquery.shCircleLoader.js"></script>
	<script>
		$("h3").addClass("bounceInDown")
		$("p").addClass("bounceInUp")
		$('#loader').shCircleLoader({color:"white"});
		var i = 0;
		setInterval(function() {
		    $('#loader').shCircleLoader('progress', i + '%');
		    ++i
		    if (i = 100) {
		    	
		    	$(".left").addClass("bounceOutLeft")
		    	$(".middle").addClass("zoomOutUp")
		    	$(".right").addClass("bounceOutRight")
		    }
		}, 5000);
	</script>
</html>
